<template >
  <div>
    <!--查询-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名：">
        <el-input
          v-model="formInline.userName"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-col :span="11">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="formInline.sDate"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="formInline.eDate"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="success" @click="Add">添加</el-button
        ><el-button type="danger" @click="DelAll">批量删除</el-button>
      </el-form-item>
    </el-form>
    <!--列表显示-->
    <el-table
      ref="multipleTable"
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="userPIc" label="用户头像">
        <template slot-scope="scope">
          <img
            :src="'https://localhost:44366/' + scope.row.userPIc"
            style="width: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户名"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="roleName" label="角色名称">
        <template slot-scope="scope">
          {{ scope.row.roleName.join(",") }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="default"
            @click="Del(scope.row.id, scope.row.adminRoleId)"
            >删除</el-button
          >
          <el-button
            type="primary"
            size="default"
            @click="UpdList(scope.row.id, scope.row.adminRoleId)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.page"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="formInline.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
    >
    </el-pagination>

    <!--弹框添加-->
    <el-dialog
      title="用户管理添加"
      :destroy-on-close="true"
      :visible.sync="dialogFormVisible"
    >
      <user-add ref="userAdd" @OnSave="SaveDate"></user-add>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Save">确 定</el-button>
      </div>
    </el-dialog>

    <!--弹框修改-->
    <el-dialog
      title="用户管理修改"
      :destroy-on-close="true"
      :visible.sync="dialogUpdate"
    >
      <user-update
        @Update="UpdDate"
        :Uid="Uid"
        :AdminRoleId="AdminRoleId"
        ref="userUpdate"
      ></user-update>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdate = false">取 消</el-button>
        <el-button type="primary" @click="Upd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import UserAdd from "../User/UserAdd.vue";
import UserUpdate from "../User/UserUpdate.vue";
import axios from "@/unit/request";
export default {
  components: {
    UserAdd,
    UserUpdate,
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogUpdate: false,
      Uid: "",
      AdminRoleId: "",
      ids: [],
      tableData: [],
      formInline: {
        page: 1,
        size: 3,
        userName: "",
        sDate: "",
        eDate: "",
      },
      total: 0,
    };
  },
  methods: {
    //添加
    Add() {
      this.dialogFormVisible = true;
    },
    Save() {
      this.$refs.userAdd.submitForm("ruleForm");
    },
    SaveDate() {
      this.dialogFormVisible = false;
      this.GetUser();
    },
    //修改
    UpdList(uid, adminRoleId) {
      this.dialogUpdate = true;
      this.Uid = uid;
      this.AdminRoleId = adminRoleId;
    },
    Upd() {
      this.$refs.userUpdate.submitForm("ruleForm");
    },
    UpdDate() {
      this.dialogUpdate = false;
      this.GetUser();
    },
    //全选 反选 获取id值
    handleSelectionChange(val) {
      this.multipleSelection = val;

      val.forEach((res) => {
        this.ids.push(res.id);
      });
    },

    //批量删除
    DelAll() {
      if (this.ids.length == 0) {
        this.$message.error("至少选择一条要删除的数据");
        return;
      }
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.post("/UserRole/DeleteAll", this.ids).then((res) => {
            if (res.data.code == 1) {
              this.$message.success(res.data.message);

              this.onSubmit();
            } else {
              this.$message.error(res.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //删除
    Del(id, adminRoleId) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .post(
              "/UserRole/Delete?id=" + id + "&adminRoleId=" + adminRoleId + ""
            )
            .then((res) => {
              if (res.data.code == 0) {
                this.$message.success(res.data.message);

                this.onSubmit();
              } else {
                this.$message.error(this.data.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //查询全部数据
    GetUser() {
      this.formInline.sDate ? this.formInline.sDate : "";
      this.formInline.eDate ? this.formInline.eDate : "";
      axios
        .get(
          "/UserRole/Query?userName=" +
            this.formInline.userName +
            "&sDate=" +
            this.formInline.sDate +
            "&eDate=" +
            this.formInline.eDate +
            "&page=" +
            this.formInline.page +
            "&size=" +
            this.formInline.size +
            ""
        )
        .then((res) => {
          this.tableData = res.data.data;
          console.log(res);

          this.formInline.size = res.data.pageSize;

          this.total = res.data.totalCount;
        });
    },
    handleSizeChange(page) {
      this.formInline.size = page;
      this.GetUser();
    },
    handleCurrentChange(page) {
      this.formInline.page = page;
      this.GetUser();
    },
    //查询
    onSubmit() {
      this.formInline.page = 1;
      this.GetUser();
    },
  },

  created() {
    this.GetUser();
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  max-width: 178px;
  max-height: 178px;
  display: block;
}
</style>